<template>
  <!-- 图片懒加载 -->
  <!-- 二次优化操作，长列表item元素增加属性content-visibility: auto; 当元素不在可视范围内，子元素不会渲染
    结合contain-intrinsic-size: 20vh; 指定元素在不可视区域内 存在一个自然高度，避免滚动条出现抖动问题（元素高度不断增加盒子高度变大，滚动条会不断缩小抖动）
  -->
  <!-- 计算当前屏幕位置，展示对应元素 -->
  <div class='scrollDisplay'>
    <div class="displayWrap">
      <div :class="['displayItem']" :id="[`displayItem${index}`]"
        :style="{ 'backgroundColor': `#${Math.random().toString().slice(2, 8)}` }" v-for="item, index in 200"
        :key="index">
        <div>item {{ index }}</div>
        <img v-imgLazy="`https://picsum.photos/200/300`">
      </div>
    </div>
  </div>
</template>
 
<script setup>
import { vImgLazy } from '@/directive/imgLazy.js';

</script>

<style lang='scss' scoped>
/* TODO 当图片src为空或者不存在src时候，透明度为0 */
img[src=""],
img:not([src]) {
  opacity: 0;
}

.scrollDisplay {
  width: 100%;

  .displayWrap {
    width: 60%;
    margin: 0 auto;

    .displayItem {
      width: 100%;
      // height: 20vh;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 4vh;
      border-radius: 5px;
      transition: opacity 1.5s;
      content-visibility: auto;
      contain-intrinsic-size: auto 20vh;

      img {
        height: 100%;
        height: 20vh;
        aspect-ratio: 1/1;
      }
    }
  }
}
</style>